<template>
	<view class="coupons">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#2f75fa" :activeStyle="{
					color: '#2f75fa'
				}" :inactiveStyle="{
					color: '#353535'
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>
		<!-- // q_type 平台1 场馆2 新人3 -->
		<!-- //type 代金券1 满减券2 折扣券3 -->
		<!-- v-if="wrapperlist.length" -->
		<view class="coupons-list"  :class="[{ lapse: currentTab === 2 }]">
			<view v-for="(item,index) in 3" :key="index" class="coupons-item flex-between">
				<view class="status pa"
					:style="{ backgroundImage: tabsList[currentTab].icon ? `url(${tabsList[currentTab].icon})` : '' }">
				</view>
				<view class="coupons-quan">
					抵用券
				</view>
				<view class="coupons-dikou" v-if="item.couponType == '折扣券'">
					折扣券
				</view>
				<!-- 满减券2 -->
				<view class="left flex-center">
					<view class="text-center">
						<view class="name">
							{{item.couponName}}
						</view>
						<view class="desc">
							{{formatDate(item.useEndTime)}}到期<text class="text_text">规则>></text>
						</view>
						<!-- <view class="desc" v-if="item.instructions != ''">
							使用说明:{{item.instructions}}
						</view> -->
					</view>
				</view>
				<view class="right" >
					<view>¥ <text class="price">{{item.policyAmount}}</text></view>
					<text class="full">满{{item.policyValue}}元可用</text>
					<view class="right_botton" @click="sav_list" v-if="currentTab == 0">
						去使用
					</view>
				</view>

				<view class="left flex-center" v-if="item.couponType == '折扣券'">
					<view class="text-center">
						<view class="name">
							{{item.couponName}}
						</view>
						<view class="desc">
							<!-- {{formatDate(item.useEndTime)}} -->
							{{item.useStartTime}}-{{item.useEndTime}}
						</view>
					</view>
				</view>
				<view class="right" v-if="item.couponType == '折扣券'">
					<view><text class="price">{{item.policyValue}}</text>折</view>
					<!-- <text class="full">满{{item.policyValue}}元可用</text> -->
					<view class="right_botton" @click="sav_list" >
						去使用
					</view>
				</view>
			</view>
		</view>

		<!-- <u-empty v-else mode="coupon" text="暂无优惠券~" icon="http://cdn.uviewui.com/uview/empty/coupon.png" /> -->
		<view class="bottom-add-btn">
			<u-button text="领取优惠券" shape="circle" @click="add"
				color="linear-gradient(0deg, #0E9698 0%, #0E9698 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	const index = require("@/api/index/index.js");
	export default {
		data() {
			return {
				currentTab: 0,
				tabsList: [{
						name: '未使用'
					},
					{
						name: '已使用',
						icon: 'https://thywtjp.lysport.net/assets/wechat_img/dcf0218fded9036bea5025856404f6c159351f45.png'
					},
					{
						name: '已过期',
						icon: 'https://thywtjp.lysport.net/assets/wechat_img/2e8eb51996967ced9c8480a2a2054f07ea437a0d.png'
					},
				],
				couponsList: [],
				listQuery: { //分页
					current: 1,
					size: 8,
				},
				totalPage: '', //几页
				wrapperlist: [],

				total: "",
				couponStatus: '未使用'
			}
		},
		// onLoad() {
		// 	this.membercouponpage()
		// },
		onShow() {
			this.wrapperlist = []
			// this.membercouponpage()
		},
		methods: {
			// 优惠卷列表
			async membercouponpage() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.wrapperlist = [];
				let postData = {
					memberId: uni.getStorageSync("userInfo").id,
					status: this.currentTab,
					current: this.listQuery.current,
					size: this.listQuery.size,
					couponStatus: this.couponStatus
				}
				let res = await market.membercouponpage(postData);
				if (res.data.code == 200) {
					console.log(res.data.data.records, '13')
					that.wrapperlist = that.wrapperlist.concat(res.data.data.records); //将数据拼接在一起
					that.totalPage = res.data.data.total
				}
			},
			// 滚动加载
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.membercouponpage()
			},
			onClickTab({
				index
			}) {
				console.log(index, '123')
				if (index == 0) {
					this.couponStatus = '未使用'
				} else if (index == 1) {
					this.couponStatus = '已使用'
				} else if (index == 2) {
					this.couponStatus = '已过期'
				}
				this.listQuery.pageNo = 1
				this.currentTab = index;
				this.membercouponpage()
				this.wrapperlist = []
			},
			add() {
				uni.navigateTo({
					url: '../receive_coupon/receive_coupon'
				})
			},
			sav_list() {
				uni.navigateTo({
					url: '/page_admin/selection/selection'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupons {
		min-height: 100vh;
		background-color: #f7f7f7;
		padding-bottom: env(safe-area-inset-bottom);

		/deep/.u-tabs {
			background-color: #fff;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}
		}

		.coupons-list {
			padding: 20rpx 40rpx;

			.coupons-quan {
				width: 112rpx;
				height: 40rpx;
				background: linear-gradient(240deg, #FE3124 0%, #FE7726 100%);
				border-radius: 12rpx 0rpx 104rpx 0rpx;
				opacity: 1;
				position: absolute;
				top: 0;
				color: #FFFFFF;
				font-size: 24rpx;
				text-align: center;
				line-height: 40rpx;
			}

			.coupons-dikou {
				width: 112rpx;
				height: 40rpx;
				background: linear-gradient(240deg, #FE3124 0%, #FE7726 100%);
				border-radius: 12rpx 0rpx 104rpx 0rpx;
				opacity: 1;
				position: absolute;
				top: 0;
				color: #FFFFFF;
				font-size: 24rpx;
				text-align: center;
				line-height: 40rpx;
			}

			&.lapse {
				.left {
					color: #bebebe;
				}
			}
		}

		.coupons-item {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx 0;
			position: relative;
			overflow: hidden;

			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				background-color: #f7f7f7;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				transform: translateY(-50%);
			}

			&::before {
				left: 0;
				transform: translate(-50%, -50%);
			}

			&::after {
				right: 0;
				transform: translate(50%, -50%);
			}

			&+.coupons-item {
				margin-top: 20rpx;
			}

			.status {
				bottom: -30rpx;
				right: 30%;
				width: 116rpx;
				height: 116rpx;
				background-position: left bottom;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.left {
				width: 70%;
				color: #f63043;
				font-size: 28rpx;

				.name {
					width: 100%;
					height: 52rpx;
					font-size: 36rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 52rpx;
				}

				.desc {
					margin-top: 10rpx;
					width: 100%;
					height: 28rpx;
					font-size: 20rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #A8A8A8;
					line-height: 28rpx;

					.text_text {
						margin-left: 10rpx;
					}
				}
			}

			.right {
				flex: 1;
				color: #0E9698;

				.price {
					width: 76rpx;
					height: 50rpx;
					font-size: 48rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 500;
					color: #0E9698;
					line-height: 50rpx;
				}

				.full {
					width: 94rpx;
					height: 28rpx;
					font-size: 20rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #A8A8A8;
					line-height: 28rpx;
					margin-top: -20rpx;
				}

				.right_botton {
					width: 136rpx;
					height: 48rpx;
					background: #0E9698;
					border-radius: 312rpx 312rpx 312rpx 312rpx;
					opacity: 1;
					color: #FFFFFF;
					font-size: 20rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					text-align: center;
					line-height: 48rpx;
					margin-top: 10rpx;
				}

			}
		}
	}
</style>